<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <style>
    .container {
      position: relative;
      width: 400px;
      margin: 50px auto;
    }

    nav {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 200px;
    }

    section {
      margin-left: 200px;
    }

    footer {
      position: fixed;
      bottom: 0;
      left: 0;
      height: 70px;
      background-color: white;
      width: 100%;
    }

    body {
      margin-bottom: 100px;
    }
  </style>

  <body>
    <div class="container">
      <nav>
        <ol>
          <li>aa</li>
          <li>aa</li>
          <li>aa</li>
          <li>aa</li>
        </ol>
      </nav>

      <section>section 的 margin-left 样式确保了有足够的空间容纳 nav 元素。</section>

      <section>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, et sed. Accusantium esse
        voluptates, blanditiis quam earum beatae? Similique nesciunt sint rerum cum esse harum animi
        tempora dicta architecto autem. Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Beatae, et sed. Accusantium esse voluptates, blanditiis quam earum beatae? Similique
        nesciunt sint rerum cum esse harum animi tempora dicta architecto autem. Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Beatae, et sed. Accusantium esse voluptates,
        blanditiis quam earum beatae? Similique nesciunt sint rerum cum esse harum animi tempora
        dicta architecto autem.
      </section>

      <section>注意观察当你调整浏览器窗口时发生了什么。效果很赞！</section>

      <footer>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum molestiae numquam, sint totam
        excepturi ea tempore laborum magni ex illo cumque, perferendis atque fuga, incidunt est
        maxime vitae corporis nisi.
      </footer>
    </div>
  </body>
</html>
